<template>
	<div class="goods">
        <router-link to="/search">
            <span class="fa fa-search"></span>
            <input type="text" placeholder="搜一搜">
        </router-link>
        <main>
            <div class="left">
                <router-link to="/goods">
                    <div>家用电器</div>
                </router-link>
                <router-link to="/goods1">
                    <div>居家餐厨</div>
                </router-link>
                <router-link to="/goods2">
                    <div @click="fn" :style="ba">服饰装配</div>
                </router-link>
            </div>
            <div class="right">
                <header>
                    <img src="../assets/img/ppth.png" alt="">
                </header>
                <div class="wntj">
                    <p>T恤衬衫</p>
                    <div class="wntj_txcs">
                        <dl v-for="item in txcsarr.goodsList" :key="item.id">
                            <router-link class="wydq" :to="`/details?id=${item.id}&type=${txcsarr.type}`">
                                <dt> <img :src=" $base  + '/' + item.img " alt=""> </dt>
                                <dd>{{item.title}}</dd>
                            </router-link>
                        </dl>
                    </div>
                </div>
                <div class="wntj">
                    <p>首饰</p>
                    <div>
                        <dl v-for="item in ssarr.goodsList" :key="item.id">
                            <router-link class="wydq" :to="`/details?id=${item.id}&type=${ssarr.type}`">
                                <dt> <img :src=" $base  + '/' + item.img " alt=""> </dt>
                                <dd>{{item.title}}</dd>
                            </router-link>
                        </dl>
                    </div>
                </div>
                <div class="wntj">
                    <p>手表</p>
                    <div>
                        <dl v-for="item in sbarr.goodsList" :key="item.id">
                            <router-link class="wydq" :to="`/details?id=${item.id}&type=${sbarr.type}`">
                                <dt> <img :src=" $base  + '/' + item.img " alt=""> </dt>
                                <dd>{{item.title}}</dd>
                            </router-link>
                        </dl>
                    </div>
                </div>
            </div>
        </main>
	</div>
</template>

<script>
	export default{
        data:function(){
            return {
                ba : '',
                txcsarr : [],
                ssarr : [],
                sbarr : []
            }
        },
		methods : {
            fn:function(){
                this.ba = {"background":"red","color" : "#f7f7df"};
            }
        },
        async mounted(){
            this.ba = {"background":"red","color" : "#f7f7df"};
            //T恤衬衫
            var {data} = await this.$axios.get(this.$base + '/txcs')
            this.$set(this.txcsarr,"goodsList",data);
            this.$set(this.txcsarr,"type","txcs");
            //首饰
            var {data} = await this.$axios.get(this.$base + '/ss')
            this.$set(this.ssarr,"goodsList",data);
            this.$set(this.ssarr,"type","ss");
            //手表
            var {data} = await this.$axios.get(this.$base + '/sb')
            this.$set(this.sbarr,"goodsList",data);
            this.$set(this.sbarr,"type","sb");
        }
	}
</script>
 
<style lang="scss">
    .goods{
            height : 100%;
            display: flex;
            flex-direction: column;
            a{
                height: 1.27rem;
                display: inline-block;
                input{
                    width : 8.74rem;
                    height : 0.87rem;
                    margin : 0.2rem 0.8rem;
                    border-radius: 0.5rem;
                    outline : none;
                    background : #f6f6f6;
                    border : none;
                    padding-left : 1.16rem;
                }
                .fa-search{
                    position : absolute;
                    left : 1.2rem;
                    top : 0.36rem;
                    color : #c6c6c6;
                }
            }
            main{
                flex : 1;
                background : #f8f8f8;
                color : #000;
                width : 10.8rem;
                overflow: auto;
                padding : 0;
                margin-bottom : 1.52rem;
                display : flex;
                border-top : 1px solid #efefef;
                .left::-webkit-scrollbar{
                    display : none;
                }
                .left{
                    height: 100%;
                    width : 2.68rem;
                    display: flex;
                    flex-direction: column;
                    overflow: auto;
                    background : #fff;
                    div{
                        font-size : 0.32rem;
                        color : #707070;
                        margin : 0.36rem 0.27rem;
                        padding : 0.18rem 0.37rem;
                        border-radius : 0.5rem;
                        box-sizing : border-box;
                        text-align : center;
                    }

                }
                .right::-webkit-scrollbar{
                    display : none;
                }
                .right{
                    overflow: auto;
                    flex : 1;
                    background : #f7f7f7;
                    padding : 0.27rem 0.29rem;
                    // margin-bottom : 0;
                    header{
                        width : 100%;
                        margin : 0.29rem 0 0.58rem;
                        img{
                            width : 7.55rem;
                        }
                    }
                    .wntj{
                        width : 7.56rem;
                        background : #fff;
                        border-radius : 0.2rem;
                        margin : 0.29rem 0;
                        p{
                            width : 100%;
                            height : 1.04rem;
                            padding : 0.36rem 0  0 0.3rem;
                            box-sizing : border-box;
                        }
                        .wntj_txcs{
                           justify-content: start; 
                        }
                        div{
                            display : flex;
                            flex-wrap:wrap;
                            justify-content: space-between;
                            align-items: center; 
                            padding-bottom : 0.36rem;
                            dl{
                                text-align : center;
                                dt{
                                    img{
                                        width : 2.19rem;
                                        height : 1.8rem;
                                    }
                                }
                                dd{
                                    color : #6e6e6e;
                                    font-size : 0.26rem;
                                }
                            }
                        }
                    }
                }   
            }
        }
</style>